<template>
	<div>
		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column prop="name" label="名称"></el-table-column>
			<el-table-column prop="ipAddr" label="IP地址"></el-table-column>
			<el-table-column prop="createName" label="创建人" width="120"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="primary" size="mini" @click="handleEdit(row)" class="jurisdiction">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row)" class="jurisdiction">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>

		<Pagination
			style="margin-top: 20px"
			v-show="parseInt(pageObj.count) > 0"
			:total="parseInt(pageObj.count)"
			@change="getList"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
		/>
	</div>
</template>
<script>
import { tbSysBlackQuery, tbSysBlackDelete } from '@/api/admin/system/black-manage';
export default {
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10,
				name: '',
				ipAddr: ''
				// type: '1',
			},
			tableData: [],
			pageObj: {}
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshBlackList', () => {
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshBlackList');
	},
	methods: {
		getList() {
			tbSysBlackQuery(this.listQuery).then(res => {
				this.tableData = res.data.data;
				this.pageObj = res.data;
			});
		},
		handleEdit(row) {
			this.$bus.$emit('showDialogBlackAdd', row);
		},
		//删除确认
		handleDelete(row) {
			this.deleteTips(() => {
				this.delete(row);
			}, '确定要删除吗?');
		},
		//删除
		async delete(row) {
			let { id } = row;
			await tbSysBlackDelete(id);
			this.getList();
		}
	}
};
</script>
<style scoped lang="scss"></style>
